<template>
	<div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState, mapGetters } from "vuex";
export default {
	name: "MoneyData",
	methods: {
		echarts(dataY) {
			let myChart = echarts.init(document.getElementById("main"));
			myChart.setOption({
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "shadow",
					},
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true,
				},
				xAxis: [
					{
						type: "category",
						name: "日期",
						data: ["3-1", "3-2", "3-3", "3-4", "3-5", "3-6", "3-7", "3-8", "3-9", "3-10"],
						axisTick: {
							alignWithLabel: true,
						},
					},
				],
				yAxis: [
					{
						type: "value",
					},
				],
				series: [
					{
						name: "Direct",
						type: "bar",
						barWidth: "60%",
						data: dataY,
					},
				],
			});
		},
		handerclick() {
			this.echarts(this.moneyData.dataY);
		},
	},
	computed: {
		...mapState("home", ["moneyData"]),
	},
	watch: {
		moneyData: "handerclick",
	},
	mounted() {
		this.$store.dispatch("home/getMoneyData");
	},
};
</script>

<style lang="less" scoped>
#main {
	width: 100%;
	height: 300px;
	overflow: hidden;
}
</style>
